<template>
  <div class="components-layout">
    <p class="components-layout-title">{{title}}</p>
    <slot></slot>
    <div class="demo-code" :class="{ 'demo-visible': visible }">
        <pre v-highlight>
            <code>{{ code }}</code>
        </pre>
    </div>
      <Button @click="visible = !visible">{{
      visible ? "查看代码" : "隐藏代码"
    }}</Button>
  </div>
</template>

<script setup lang="ts">
import Button from "@/views/components/Button/Button.vue";
import { defineProps, ref } from "vue";
const { code } = defineProps({
  code: {
    type: String,
    required: true,
  },
  title:{
    type: String,
    required: true,
  }
});
let visible = ref(true);
</script>
<style lang="scss" scoped>
.components-layout {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
  margin-bottom: 50px;
  &-title {
    font-size: 20px;
    font-weight: bold;
    line-height: 2;
    border-bottom: 1px solid #eee;
  }
  .demo-code {
    height: auto;
    overflow: hidden;
    transition: height 1s 1s linear;
  }
  .demo-visible {
    height: 0px;
  }
}
</style>
